<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>Ai小艾 Aixiaoai_cn</title>
    <meta name="keywords" content="文章编辑 Aixiaoai_cn"/>
    <meta name="description" content="文章编辑 Aixiaoai_cn"/>
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="../static/css/miniMobile.css"/>
		<script type="text/javascript" src="../static/js/zepto.min.js"></script>
		<script type="text/javascript" src="../static/js/miniMobile.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="../static/plugins/fonticon/iconfont.css" />
		<!-- swiper -->
		<link rel="stylesheet" href="../static/css/swiper.min.css">
		<script src="../static/js/swiper.min.js"></script>
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="../static/css/animate.css" />

	</head>

	<body class="fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c o-h" >
			<div class="ui-header-l fl w5">
				<b class="icon iconfont icon-sortlight"></b>
			</div>
			<div class="ui-header-c fl f30 w59">
				我的主页
			</div>
		</header>
		<!-- aside -->
		<aside class="ui-aside w40 bg-color-success f30">
			<div class="user p3 color8 clearfix">
				<div class="fl w10">
					<img src="../static/css/image/index.jpg" class="w10 h10 radius-o" />
				</div>
				<div class="fr w22">
					<span>{{username}}</span><br />
				</div>
			</div>
			<ul class="f30 mt2">
				<li>
					<a href="index" class="pl3 color8">首页</a>
				</li>
				<li>
					<a id="edit" class="pl3 color8">文章编辑</a>
                    <script>
                        $("#edit").click(function () {
                            var page = document.getElementById('ifd');
                            page.setAttribute('src','edit');
                        });

                    </script>
				</li>
                <li>
					<a id="articles_update_list " class="pl3 color8">修改文章</a>
                    <script type="text/javascript">
                         $("#articles_update_list").click(function () {
                            var page = document.getElementById('ifd');
                            page.setAttribute('src','article/index');
                        });
                    </script>
				</li>
				<li>
					<a href="msg" class="pl3 color8">消息通知</a>
				</li>
        <li>
					<a href="logout" class="pl3 color8">登出</a>
				</li>
			</ul>
		</aside>
		<style>
			/*只针对侧栏内容部分做简单的样式*/

			.ui-aside {
				line-height: 1.5em;
			}

			.ui-aside ul {
				border-top: 0.02rem solid #017da7;
			}

			.ui-aside li {
				line-height: 0.8rem;
				border-bottom: 0.02rem solid #017da7;
			}

			.ui-aside a {
				display: block;
			}
		</style>
		<script type="text/javascript">
			var aside = $(".ui-aside").asideUi({
				hasmask: true,
				size: "4rem",
				position: "left",
				sidertime: 300
			});
			$(".ui-header-l").on('touchend', function() {
				aside.toggle();
			})
		</script>
		<!-- swiper -->
		<iframe src="index_content.html" width="100%"  id="ifd"  scrolling="yes" frameborder="0"></iframe>
		<script type="text/javascript">
			window.onload = function() {
    		var iframe = document.getElementById("ifd");
    		iframe.style.width = window.innerWidth + 'px';
    		iframe.style.height = window.innerHeight + 'px';
			};
		</script>
		<!-- 底部导航 -->
		<nav class="demo-bottomNav mt6 w75 h12 pt1 t-c f28 bg-color8 o-h clearfix" id='bottom_menu'>
			<div class="w25 fl">
				<a href="index">
					<i class="f46 icon iconfont icon-home_light"></i>
					<p>首页</p>
				</a>
			</div>
			<div class="w25 fl">
				<a id="articles_list">
					<i class="f46 icon iconfont icon-rank"></i>
					<p>文章列表</p>
                    <script type="text/javascript">
                         $("#articles_list").click(function () {
                            var page = document.getElementById('ifd');
                            page.setAttribute('src','article/index');
                        });
                    </script>
				</a>
			</div>
			<div class="w25 fl">
				<a href="personal_msg">
					<i class="f46 icon iconfont icon-servicefill"></i>
					<p>个人消息</p>
				</a>
			</div>
		</nav>
		<style type="text/css">
			#bottom_menu{
				position: fixed;
				bottom: 0px;
			}
			.demo-bottomNav {
				line-height: 1.8em;
				border-top:0px solid #F1F1F1;
			}

			.demo-bottomNav a {
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</body>

</html>
